<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>竹里馆后台</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="./css/font.css">
	<link rel="stylesheet" href="./css/xadmin.css">
    <link rel="stylesheet" href="https://cdn.bootcss.com/Swiper/3.4.2/css/swiper.min.css">
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdn.bootcss.com/Swiper/3.4.2/js/swiper.jquery.min.js"></script>
    <script src="./lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="./js/xadmin.js"></script>
	<style>
	#DataTables_pageInfo a {
		border: 1px solid #a1a1a1;
		padding: 1px 10px;
		background: #FFDDAA;
		width: 1px;
		border-radius: 5px;
		color:blue;
	}
	</style>
</head>
<body>
    <!-- 顶部开始 -->
    <div class="container">
        <div class="logo"><a href="./index.jsp">竹里馆</a></div>
        <div class="open-nav"><i class="iconfont">&#xe699;</i></div>
        <ul class="layui-nav right" lay-filter="">
          <li class="layui-nav-item">
             <a href="#">${sessionScope.adminMap.adminId}</a>
            <dl class="layui-nav-child"> <!-- 二级菜单 -->
              <dd><a href="${pageContext.request.contextPath}/AdminServlet?op=logout">退出</a></dd>
            </dl>
          </li>
          <li class="layui-nav-item"><a href="${pageContext.request.contextPath}/back/index.jsp">首页</a></li>
        </ul>
    </div>
    <!-- 顶部结束 -->
    <!-- 中部开始 -->
    <div class="wrapper">
        <!-- 左侧菜单开始 -->
        <div class="left-nav">
          <div id="side-nav">
            <ul id="nav">
                <li class="list" current>
                    <a href="./index.jsp">
                        <i class="iconfont">&#xe761;</i>
                        首页
                        <i class="iconfont nav_right">&#xe697;</i>
                    </a>
                </li>              
                <li class="list" >
                    <a href="javascript:;">
                        <i class="iconfont">&#xe6a3;</i>
                        房源信息
                        <i class="iconfont nav_right">&#xe697;</i>
                    </a>
                    <ul class="sub-menu">
                        <li>
                            <a href="./HomestayMessageAdmin.jsp">
                                <i class="iconfont">&#xe6a7;</i>
                                                      民宿管理
                            </a>
                        </li>
                    </ul>
                </li>
                <li class="list" >
                    <a href="javascript:;">
                        <i class="iconfont">&#xe6a3;</i>
                        订单详情
                        <i class="iconfont nav_right">&#xe697;</i>
                    </a>
                    <ul class="sub-menu" style="display:none">
                        <li>
                            <a href="./orderInfo.jsp">
                                <i class="iconfont">&#xe6a7;</i>
                                订单列表
                            </a>
                        </li>
                    </ul>
                </li>
                
               <li class="list" >
                    <a href="javascript:;">
                        <i class="iconfont">&#xe6a3;</i>
                       	 销量统计
                        <i class="iconfont nav_right">&#xe697;</i>
                    </a>
                    <ul class="sub-menu" style="display:none">
                        <li id="regionChart">
                            <a href="${pageContext.request.contextPath}/back/echarts.jsp">
                                <i class="iconfont">&#xe6a7;</i>
                              	 各地区总收入报表
                            </a>
                        </li>
                        <li id="styleChart">
                            <a href="${pageContext.request.contextPath}/back/echarts2.jsp">
                                <i class="iconfont">&#xe6a7;</i>
                                                                                               按风格查询报表                                                               
                            </a>
                        </li>
                    </ul>
                </li>
               
            </ul>
          </div>
        </div>
        <!-- 左侧菜单结束 -->
        <!-- 右侧主体开始 -->
        <div class="page-content">
          <div class="content">
           <div class="layui-form-pane" style="text-align: center;">
          	  <div class="layui-form-item" style="display: inline-block;">
				 <label class="layui-form-label xbs768">每页</label>
					<!-- 下拉框 -->
						
	                      <select id="selectPageSize" style="width:80px;margin-left:10px;margin-right:10px" class="layui-form-label xbs768">
							<option value="3">3</option>
							<option value="4">4</option>
							<option value="5">5</option>
						</select>
				    <label class="layui-form-label xbs768"> 条</label> 
				
				 <div class="layui-input-inline" style="margin-left:10px">
	               <input type="text" name="username"  placeholder="请输入用户名" autocomplete="off" class="layui-input" id="kw">
	          	 </div>
		         <div class="layui-input-inline" style="width:150px">
		               <button class="layui-btn"  lay-submit="" lay-filter="sreach" id="searchBtn" style="margin-left:-50px;"><i class="layui-icon">&#xe615;搜索</i></button>
		         		<button class="layui-btn" id="clearSearchBtn" style="margin-left:-1px;">清除搜索</button>
		         </div>
			</div>
	      </div>   
	          
          <xblock>
          	<button class="layui-btn layui-btn-danger delete_all"><i class="layui-icon">&#xe640;</i>批量删除</button>
          </xblock>
           	 <table class="layui-table">
                <thead>
               	<!--  订单编号 订单名称 总价格 购买人 支付状态 添加时间 操作（删除） -->
                    <tr>
                        <th><input type="checkbox" name="checkedAll" value="" id="checkedAll"></th>
                        <th>订单编号</th>
                        <th>订单名称</th>
                        <th>总价格</th>
                        <th>购买人</th>
                        <th>支付状态</th>
                        <th>添加时间</th>
                        <th>操作</th>                        
                    </tr>
                </thead>
                <tbody id="content">
                    <!-- <tr>
                        <td><input type="checkbox" value="1" name=""></td>
                        <td>1</td>
                        <td>拾年</td>
                        <td > 180</td>
                        <td >小明</td>
                        <td >未支付</td>
                        <td>2017-01-01 11:11:42</td>                       
                        <td class="td-manage">                          
                            <a title="删除" href="javascript:;" onclick="member_del(this,'1')" 
                            style="text-decoration:none">
                                <i class="layui-icon">&#xe640;</i>
                            </a>
                        </td>
                    </tr> -->
                </tbody>
            </table>
            <!-- 右侧内容框架，更改从这里结束 -->
             	<!-- 分页 -->
				<xblock style="height:40px"><span id="DataTables_pageInfo" class="x-right" style="line-height:40px"></span></xblock>
          </div>
        </div>
        <!-- 右侧主体结束 -->
    </div>
    <!-- 中部结束 -->
    <!-- 底部开始 -->
    <!-- 底部结束 -->
    <!-- 背景切换开始 -->
	<div class="bg-changer">
        <div class="swiper-container changer-list">
            <div class="swiper-wrapper">
                <div class="swiper-slide"><img class="item" src="./images/a.jpg" alt=""></div>
                <div class="swiper-slide"><img class="item" src="./images/b.jpg" alt=""></div>
                <div class="swiper-slide"><img class="item" src="./images/c.jpg" alt=""></div>
                <div class="swiper-slide"><img class="item" src="./images/d.jpg" alt=""></div>
                <div class="swiper-slide"><img class="item" src="./images/e.jpg" alt=""></div>
                <div class="swiper-slide"><img class="item" src="./images/f.jpg" alt=""></div>
                <div class="swiper-slide"><img class="item" src="./images/g.jpg" alt=""></div>
                <div class="swiper-slide"><img class="item" src="./images/h.jpg" alt=""></div>
                <div class="swiper-slide"><img class="item" src="./images/i.jpg" alt=""></div>
                <div class="swiper-slide"><img class="item" src="./images/j.jpg" alt=""></div>
                <div class="swiper-slide"><img class="item" src="./images/k.jpg" alt=""></div>
                <div class="swiper-slide"><span class="reset">初始化</span></div>
            </div>
        </div>
        <div class="bg-out"></div>
        <div id="changer-set"><i class="iconfont">&#xe696;</i></div>   
    </div>
    <!-- 背景切换结束 -->
<!-- --------订单信息列表-------- -->
<script type="text/javascript">
		$(document).ready(function(){
			// 页面一进入,ajax异步请求服务器响应数据-文章列表
			// 调用发送异步请求的方法,参数是页码
			sendAjax(1);
			
			// 1.首页
			$(document).on("click","#first",function(){
				// 调用发送异步请求的方法,参数是页码
				sendAjax(1);
			});
			
			// 2.尾页
			$(document).on("click","#last",function(){
				// 获取总页数
				var lastPageNum = $("#pageInfo").data("pagepages");
				var pageNum = lastPageNum;
				// 调用发送异步请求的方法,参数是页码
				sendAjax(pageNum);
			});
			
			// 3.上一页
			$(document).on("click","#previous",function(){
				// 获取当前页
				var currentPageNum = $("#pageInfo").data("pagenum");
				if(currentPageNum==1){
					alert("已经是第一页,没有上一页!")
				}else{
					var pageNum = parseInt(currentPageNum)-1;
					// 调用发送异步请求的方法,参数是页码
					sendAjax(pageNum);
				}
			});
			
			// 4.下一页
			$(document).on("click","#next",function(){
				// 获取当前页
				var currentPageNum = $("#pageInfo").data("pagenum");
				// 获取总页数
				var lastPageNum = $("#pageInfo").data("pagepages");
				if(currentPageNum==lastPageNum){
					alert("已经是最后一页,没有下一页!")
				}else{
					var pageNum = parseInt(currentPageNum)+1;
					// 调用发送异步请求的方法,参数是页码
					sendAjax(pageNum);
				}
			});
			
			// 5.页码点击事件
			$(document).on("click",".current",function(){
				 var pageNum = $(this).text();
				// 调用发送异步请求的方法,参数是页码
				 sendAjax(pageNum);
			});
			
			// 6.选择显示记录数的下拉框事件
			$(document).on("change","#selectPageSize",function(){
				// 调用发送异步请求的方法,参数是页码
				sendAjax(1);
			});
			
			// 7.搜索事件
			$(document).on("click","#searchBtn",function(){
				// 调用发送异步请求的方法,参数是页码
				sendAjax(1);
			});
			
			// 8.清除搜索事件
			$(document).on("click","#clearSearchBtn",function(){
				$("#kw").val("");
				// 调用发送异步请求的方法,参数是页码
				sendAjax(1);
			});
			
			//9.删除事件
			$(document).on("click",".delete",function(){
				 if(window.confirm("是否确定删除")){
					  var orderNo = $(this).attr("data-orderNo");
					  var userNo = "${sessionScope.user.userId}";
					  var num = "2";
					  $.ajax({
							async:true,
							url:"${pageContext.request.contextPath}/UserUpdateServlet",
							type:"GET",
							data:{op:"deleteByOrderNo",
								  orderNo:orderNo,
								  homeNameKey:$("#kw").val(),
								  userNo:userNo,
								  num:num,
								  pageNum: $("#pageInfo").data("pagenum"),
								  pageSize:$("#selectPageSize").val()
							},
							dataType:"json",
							success:function(result,status,xhr){
								// 调用数据渲染的方法
								showData(result);
							},
							error:function(xhr,status,error){
								alert("异步请求失败!");
							}
					  });
				  }
			});
			
			// 10.批量删除事件
			$(document).on("click",".delete_all",function(){
				// 获取复选框被选中的
				$("input[name = checked]").each(function(){
					 if($(this).prop("checked")){
						 var orderNo = $(this).parents("td").next(6).text();
						 var userNo = "${sessionScope.user.userId}";
						 var num = "2";
						 $.ajax({
								async:true,
								url:"${pageContext.request.contextPath}/UserUpdateServlet",
								type:"GET",
								data:{op:"deleteByOrderNo",
									  orderNo:orderNo,
									  homeNameKey:$("#kw").val(),
									  userNo:userNo,
									  num:num,
									  pageNum: $("#pageInfo").data("pagenum"),
									  pageSize:$("#selectPageSize").val()
								},
								dataType:"json",
								success:function(result,status,xhr){
									// 调用数据渲染的方法
									showData(result);
								},
								error:function(xhr,status,error){
									alert("异步请求失败!");
								}
						  });
					  }
				});
			});
				
			// 当点击单个复选框时，若点击数量==当前页的复选框数时，全选按钮被选中
			$(document).on("click","input[name = checked]",function(){
				var count = 0;
				$("input[name = checked]").each(function(){
					var length = $("input[name = checked]").length;
					console.log("长度："+length);
					  if($(this).prop("checked")){
						  count++;
					  }
					  if(count == length){
						  // 复选框全选时，全选框被选中
						  $("#checkedAll").prop("checked",true);
					  }else{
						  // 复选框没有被全选中。全选框取消选中
						  $("#checkedAll").prop("checked",false);
					  }
				});
			});
				
			// 当点击全选时，选中所有框; 再次点击，取消所有框
			$(document).on("click","#checkedAll",function(){
				var checkedAll = $("#checkedAll").prop('checked');
				console.log("全选值："+checkedAll);
				if(checkedAll == true){
    				$("input[name = checked]").prop("checked",true);//全选
				}else if(checkedAll == false){
					$("input[name = checked]").prop("checked",false);//全不选
				}
   			 });
			
		})
		/*发送ajax异步请求
		  参数：pageNum 页码
		*/
		function sendAjax(pageNum){
			var userNo = "${sessionScope.user.userId}";
			 var num = "2";
			$.ajax({
				async:true,
				url:"${pageContext.request.contextPath}/UserUpdateServlet",
				type:"GET",
				data:{op:"getOrderListByPage",
					  homeNameKey:$("#kw").val(),
					  userNo:userNo,
					  num:num,
					  pageNum:pageNum,
					  pageSize:$("#selectPageSize").val()
					  },
				dataType:"json",
				success:function(result,status,xhr){
					// 调用数据渲染的方法
					showData(result);
				},
				error:function(xhr,status,error){
					alert("异步请求失败!");
				}
			});
		}
		/*渲染数据
		*/
		function showData(result){
			// 0.清空表格原始数据
			$("#content").empty();
			// 0.清空分页信息原始数据
			$("#DataTables_pageInfo").empty();
			// 1.填充表格数据
			$.each(result.data,function(index,orderInfo){
				var time = "${sessionScope.formatDate}";
				if(orderInfo.orderState == 0){
					$("#content").append("<tr align=\"center\">"+
							"<td><input type=\"checkbox\" value=\"1\" name=\"checked\"></td>"+
							"<td class=\"  sorting_1\">"+orderInfo.orderId+"</td>"+
							"<td>"+orderInfo.roomInfo.homeInfo.homeName+orderInfo.roomInfo.roomId+"</td>"+
							"<td>"+orderInfo.roomInfo.roomPrice+"</td>"+
							"<td>"+orderInfo.userInfo.userName+"</td>"+
							"<td>未支付</a></td>"+
							"<td>"+time+"</td>"+
							"<td class=\"td-manage\">"+
							  "<a title=\"删除\" href=\"javascript:;\" onclick=\"member_del(this,'1')\"  style=\"text-decoration:none\" class=\"delete\" data-orderNo=\""+orderInfo.orderId+"\"><i class=\"layui-icon\"></i>删除</a>"+
							 "</td>"+
							"</tr>");
				}else if(orderInfo.orderState == 1){
					$("#content").append("<tr align=\"center\">"+
							"<td><input type=\"checkbox\" value=\"1\" name=\"checked\"></td>"+
							"<td class=\"  sorting_1\">"+orderInfo.orderId+"</td>"+
							"<td>"+orderInfo.roomInfo.homeInfo.homeName+orderInfo.roomInfo.roomId+"</td>"+
							"<td>"+orderInfo.roomInfo.roomPrice+"</td>"+
							"<td>"+orderInfo.userInfo.userName+"</td>"+
							"<td>"+"已支付"+"</td>"+
							"<td>"+time+"</td>"+
							"<td class=\"td-manage\">"+
							  "<a title=\"删除\" href=\"javascript:;\" onclick=\"member_del(this,'1')\"  style=\"text-decoration:none\" class=\"delete\" data-orderNo=\""+orderInfo.orderId+"\"><i class=\"layui-icon\"></i>删除</a>"+
							 "</td>"+
							"</tr>");
				}
			});
			
			// 2.填充分页信息
			// 2.1 分页信息
			$("#DataTables_pageInfo").append("<span id=\"pageInfo\" data-pagenum=\""+
					result.pageNum+"\"  data-pagesize=\""+
					result.pageSize+"\"  data-pagetotal=\""+
					result.total+"\"  data-pagepages=\""+
					result.pages+"\">每页"+result.pageSize+"条 共"+result.total+"条 第"+result.pageNum+"/"+result.pages+"页</span>");
			
			// 2.2 首页 上一页
			$("#DataTables_pageInfo").append("<a href=\"#\" tabindex=\"0\"class=\"first ui-corner-tl ui-corner-bl fg-button ui-button ui-state-default\" id=\"first\">首页</a>"+
					"<a href=\"#\" tabindex=\"0\" class=\"previous fg-button ui-button ui-state-default\" id=\"previous\">上一页</a>");
			
			// 2.3页码显示
			for(var i=1; i<= result.pages; i++){
				// 判断i==当前页,添加样式ui-state-disabled不可以用,激活状态
				if(i == result.pageNum){
					$("#DataTables_pageInfo").append(
							"<a href=\"#\" tabindex=\"0\" class=\"fg-button ui-button ui-state-default ui-state-disabled\" style=\"background:deepskyblue;padding: 0px 3px;\">"+i+"</a>");
				}else{
					$("#DataTables_pageInfo").append(
							"<a href=\"#\" tabindex=\"0\" class=\"fg-button ui-button ui-state-default current\">"+i+"</a>");
				}
				
			}
				
			// 2.4下一页 尾页
			$("#DataTables_pageInfo").append("<a href=\"#\" tabindex=\"0\"class=\"first ui-corner-tl ui-corner-bl fg-button ui-button ui-state-default\" id=\"next\">下一页</a>"+
			"<a href=\"#\" tabindex=\"0\" class=\"previous fg-button ui-button ui-state-default\" id=\"last\">尾页</a>");
		}
	</script>    
    
</body>
</html>